import React, { useState } from 'react';
// import styles from './index.module.scss'
import { Divider, Row, Col, Typography } from 'antd'
import MeModel from '../../../../models/meModel'
import { Modal } from 'antd';
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, LabelList
} from 'recharts';

const { Text } = Typography;

interface PropsInterface {
  meModel: MeModel
}

function WebMeSkills(props: PropsInterface) {

  const [popTitle, setPopTitle] = useState('');
  const [popVisible, setPopVisible] = useState(false);
  const [popShowArr, setPopShowArr] = useState<Array<string>>([]); 

  const { meModel } = props

  const data = [
    {
      name: '小程序', 
      num: meModel.xcxNum,
      showArr: meModel.xcxShowArr
    },
    {
      name: 'WEB前端', 
      num: meModel.webNum,
      showArr: meModel.webShowArr
    },
    {
      name: 'iOS', 
      num: meModel.iosNum,
      showArr: meModel.xcxShowArr
    },
    {
      name: 'Node.js', 
      num: meModel.nodeNum,
      showArr: meModel.nodeShowArr
    },
    {
      name: 'Java', 
      num: meModel.javaNum,
      showArr: meModel.javaShowArr
    },
  ];

  const barClick = function(data: any) {
    setPopTitle(data.name)
    setPopVisible(true)
    setPopShowArr(data.showArr)
  }

  const JiNengList = props.meModel.expertiseArr.map((str: string, index: number) => {
    return [
      <Text key={index}>{str}</Text>,
      <br key={'br'} />
    ]
  })

  return (
    <div>
      <Divider>专业技能</Divider>
      <Row gutter={16}>
        <Col span={12}>
          {JiNengList}
        </Col>
        <Col span={12}>
          <BarChart
            width={600}
            height={400}
            data={data}
            margin={{
              top: 5, right: 30, left: 20, bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Bar onClick={ barClick } dataKey="num" fill="#8884d8">
              <LabelList dataKey="num" position="top" />
            </Bar>
          </BarChart>
        </Col>
      </Row>
      <Modal
          title={ popTitle }
          visible={ popVisible }
          onCancel={ () => setPopVisible(false) }
          footer={null}
        >
          {
            popShowArr.map((str: string) => {
              return [
                <Text key='Text'>{ str }</Text>,
                <br key='br' />
              ]
            })
          }
        </Modal>
    </div>
  );
}

export default WebMeSkills;
